<template>
	<div class="">
		<loading v-if="isloading"></loading>
		<div class="relative article-details-header">
			<img class="img-responsive" :src="url + (article.thumb_path) + (article.thumb)" />
			<div class="article-details-header-title">
				{{article.title}}
			</div>
		</div>
		<!--文章详情-->
		<div class="list-li">
			<header class="list-header">
				<div class="list-user">
					<img class="list-user-head" :src="url + (author.avatar_path) + (author.avatar)" /> {{author.username}}
				</div>
				<div class="list-time">
					{{article.created_at}}
				</div>
			</header>
			<div class="list-main" v-html="article.content">
			</div>
			<footer class="list-footer">
				<div class="list-see"></div>
				<div class="list-comment">
					<img src="../../assets/icon/comment.png" />
					<span>{{article.comment_count}}</span>
				</div>
				<div class="list-agree">
					<img src="../../assets/icon/agree.png" />
					<span>{{article.like_count}}</span>
				</div>
			</footer>
		</div>
		<!--评论列表-->
		<ul class="comment-ul">
			<li class="comment-li" v-for="comment in comment_list">
				<header class="comment-header">
					<div class="list-user">
						<img class="list-user-head" src="../../assets/home-img.png" /> {{comment.member_name}}
						<span class="list-time">{{comment.created_at}}</span>
					</div>
				</header>
				<div class="comment-main" v-html="comment.content">

				</div>
			</li>
			<no-msg v-if="noMsg" msg="该文章没有评论"></no-msg>
		</ul>
		<!--评论-->
		<div class="comment-div">
			<input v-model="content" type="text" placeholder="发表我的评论......" name="" id="" value="" />
			<span @click="sendComment" data-target="#myModal">提交</span>
			<div class="comment-div-img text-center">
				<img @click="like" src="../../assets/icon/like.svg" />
			</div>
		</div>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">尚未登录</h4>
					</div>
					<div class="modal-body">
						是否前往登录界面？
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button @click="go" type="button" class="btn btn-primary">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	import { formatDate } from '@/util/date'
	import NoMsg from "@/components/common/NoMsg"
	import Loading from "@/components/common/Loading"
	export default {
		name: 'ArticleDetails',
		components: {
			BaseHeader,
			Loading,
			NoMsg
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd  hh:mm')
			}
		},
		data() {
			return {
				uid: '',
				token: '',
				aid: '',
				url: '',
				oss_url: '',
				article: '',
				author: '',
				content: '',
				comment_list: [],
				page: '1',
				t: [],
				noMsg: false,
				isloading: true
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			this.aid = this.$route.params.aid;
			this.getArt();
			this.getComment();
			var self = this;
			//为窗口的scroll事件绑定处理函数 
			$(window).scroll(function() {
				if($(document).scrollTop() >= $(document).height() - $(window).height()) {
					//alert("滚动条已经到达底部为" + $(document).scrollTop());
					self.page++;
					if(self.page < self.page_count) {
						self.getComment();
					} else {
						return 'noMore';
					}
				}
			});
		},
		methods: {
			//获取文章详情
			getArt() {
				var self = this;
				var data = {
					id: self.aid
				};
				$.post(global.domain + global.API.information_article_show, data, function(msg) {
					//					self.isloading = false;
					if(msg.error == 0) {
						self.article = msg.data;
						self.author = msg.author;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//获取文章详情
			getComment() {
				var self = this;
				var data = {
					article_id: self.aid
				};
				$.post(global.domain + global.API.information_comment_view, data, function(msg) {
					self.isloading = false;
					if(msg.error == 0) {
						self.t = msg.data;
						for(var i = 0; i < self.t.length; i++) {
							self.comment_list.push(self.t[i]);
						};
						self.page_count = msg.page_count;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//提交评论
			sendComment() {
				if(this.uid) {
					var self = this;
					var data = {
						article_id: self.aid,
						content: self.content,
						uid: self.uid,
						token: self.token
					};
					$.post(global.domain + global.API.information_comment_add, data, function(msg) {
						if(msg.error == 0) {
							self.content = '';
							self.getComment();
							self.getArt();
						} else {
							self.$layer.alert(msg.error_msg);
							console.log(msg.error);
							if(msg.is_auth == 0) {
								localStorage.clear();
								self.$router.push({
									path: '/login'
								});
							}
						}
					}, 'json');
				} else {
					$('#myModal').modal('toggle');
					//					this.$router.push({
					//						path: '/login'
					//					});
				}
			},
			go() {
				$('#myModal').modal('toggle');
				this.$router.push({
					path: '/login'
				});
			},
			//点赞、取消点赞
			like(id) {
				if(this.uid) {
					var self = this;
					var data = {
						id: self.aid,
						uid: self.uid,
						token: self.token
					};
					$.post(global.domain + global.API.information_article_like, data, function(msg) {
						if(msg.error == 0) {
							self.getArt();
						} else {
							console.log(msg.error);
							if(msg.is_auth == 0) {
								localStorage.clear();
								self.$router.push({
									path: '/login'
								});
							}
						}
					}, 'json');
				} else {
					$('#myModal').modal('toggle');
					//					this.$router.push({
					//						path: '/login'
					//					});
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/list.css";
	@import "../../style/article.css";
	.list-li {
		border-bottom: none;
	}
	
	.noMsg {
		padding-top: 50px;
	}
</style>